<template>
  <div class="app-container">

    <el-upload
      class="upload-demo"
      :headers="headers"
      ref="update-upload"
      :action="BASE_API+'/sys/uploadThesisTemp'"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="uploadSuccess"
      :limit="1"
      style="margin-bottom: 10px">
      <el-button size="small" icon="el-icon-upload" type="primary" round>上传论文模板</el-button>
      <div slot="tip" class="el-upload__tip">只能上<strong>[zip]</strong>文件，且不超过50MB</div>
    </el-upload>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%">

      <el-table-column label="id" prop="ID"/>

      <el-table-column label="模板名称" prop="TITLE"/>

      <el-table-column label="文件名称" prop="TEMP_FILE_NAME"/>

      <el-table-column label="创建时间" prop="T_CREATE"/>

      <el-table-column label="是否展示">
        <template slot-scope="scope">
          <el-switch style="display: block" v-model="scope.row.IS_SHOW" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"
          @change="changeThesisShow($event, scope.row, scope.$index)">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column  label="操作" align="center" width="250px" fixed="right" height="500px">
        <template slot-scope="scope">
          <el-button type="danger" size="small" icon="el-icon-delete" round @click="removeThesisTemp(scope.row.ID)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 公告修改 -->
    <el-dialog title="修改FAQ" :visible.sync="dialogFormVisibleUp">


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUp = false" >取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleUp = false" >确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>

  import sysApi from '@/api/system/sys'
  import { getToken } from '@/utils/auth'

    export default {
        name: "thesisTemp",
      data() {
          return {
            list: [],
            dialogFormVisible: false,
            dialogFormVisibleUp: false,
            headers: {token: getToken()},
            BASE_API: process.env.BASE_API,
            sysSettings: {},
            thesisTemp: {},
          }
      },

      mounted() {
          this.getTempInfo()
      },

      methods: {
        getTempInfo() {
          sysApi.getThesisTemp()
            .then(result => {
              const data = result.OUT_DATA.data
              this.list = data
            })
        },

        handleRemove(file, fileList) {
        },

        handlePreview(file) {
        },

        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },

        uploadSuccess(result) {
          const data = result.OUT_DATA.data
          this.thesisTemp.TITLE = data.title
          this.thesisTemp.TEMP_FILE_NAME = data.fileName
          this.thesisTemp.TEMP_FILE_URL = data.fileUrl

          sysApi.saveThesisTemp(this.thesisTemp)
            .then(result1 => {
              this.$message({
                type: "success",
                message: '上传成功'
              })
              this.getTempInfo()
            })

          this.clearFiles()
        },

        clearFiles() {
          this.$refs['update-upload'].clearFiles();
        },

        changeThesisShow(data, b, index) {
          sysApi.updateThesisTemp(b.ID, data)
          .then(result => {
            this.$message({
              type: "success",
              message: '修改成功'
            })
          })
          this.getTempInfo()
        },

        removeThesisTemp(id) {
          this.$confirm('此操作将永久删除该记录, 是否继续?', '提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(result => {
            sysApi.deleteThesisTemp(id)
              .then(result => {
                this.$message({
                  type: "success",
                  message: '删除成功'
                })
                this.getTempInfo()
              })
          })
        }

      }

    }
</script>

<style scoped>

</style>
